<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        width: 80%;
        margin: 1rem auto;
        line-height: 2;
        position: relative;
      }
      .bg-font {
        color: #fff;
        background-color: #000;
      }
      .eraser {
        position: absolute;
        left: 0;
        top: 0;
      }
      .text {
        /* 行盒渐变效果 */
        /* background: linear-gradient(to right, #f40, #fff); */
        /* background: linear-gradient(to right, #000, #f40); */
        /* color: #fff; */
        --p: 5%;
        background: linear-gradient(
          to right,
          #0000 var(--p),
          #000 calc(var(--p) + 100px)
        );
        color: transparent;
        animation: erase 5s forwards;
      }
      /* 
        百分比不是css的属性
        导致动画不生效,采用自定义css动画属性
       */
      @property --p {
        syntax: "<percentage>";
        initial-value: 0%;
        inherits: false;
      }
      @keyframes erase {
        to {
          --p: 100%;
        }
      }
    </style>
  </head>
  <body>
    <!-- 
       - 1. 第一个盒子 , 背景为黑色 , 文字为白色 
       - 2. 第二个盒子 , 通过定位重叠在第一个盒子上面 .
       - 3. 给第二个盒子的每一行加渐变动画(由透明渐变为黑色)
          - 注意:文字要放置在行业中,因为此动画效果是行盒子
       - 4. 解决动画不生效的问题
     -->
    <div class="container">
      <p class="bg-font">
        《江城子·乙卯正月二十日夜记梦》是宋朝苏轼的诗作。 全文如下：
        十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
        夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。
        这首词是苏轼为悼念原配妻子王弗而创作的一首悼亡词，表现了绵绵不尽的哀伤和思念。
        此词情意缠绵，字字血泪。上阕记实，下阕记梦，虚实结合，衬托出对亡妻的思念，加深全词的悲伤基调。
        全词采用白描手法，出语如话家常，却字字从肺腑镂出，自然而又深刻，平淡中寄寓着真淳，思致委婉。
      </p>
      <!-- 赋值相同的内容放置在行盒中 -->
      <p class="eraser">
        <span class="text">
          《江城子·乙卯正月二十日夜记梦》是宋朝苏轼的诗作。 全文如下：
          十年生死两茫茫，不思量，自难忘。千里孤坟，无处话凄凉。纵使相逢应不识，尘满面，鬓如霜。
          夜来幽梦忽还乡，小轩窗，正梳妆。相顾无言，惟有泪千行。料得年年肠断处，明月夜，短松冈。
          这首词是苏轼为悼念原配妻子王弗而创作的一首悼亡词，表现了绵绵不尽的哀伤和思念。
          此词情意缠绵，字字血泪。上阕记实，下阕记梦，虚实结合，衬托出对亡妻的思念，加深全词的悲伤基调。
          全词采用白描手法，出语如话家常，却字字从肺腑镂出，自然而又深刻，平淡中寄寓着真淳，思致委婉。
        </span>
      </p>
    </div>
  </body>
</html>
